<template>

<div class="register-background">
    <div  class="login-wrapper">
        <div class="header">Register</div>
        <div class="form-wrapper">
 <el-form @submit.enter.prevent="onenter" :model="form">
        <el-form-item label="Username">
            <el-input v-model="form.username" @change="checkUsername"/>
            {{ form.message_username }}
        </el-form-item>
        <el-form-item label="Password">
            <el-input type="password" v-model="form.password" />
        </el-form-item>
         <el-form-item label="Email">
            <el-input v-model="form.email" @change="checkEmail"/>
            {{ form.message_email }}
        </el-form-item>
         <el-form-item label="Phone">
            <el-input v-model="form.phone" @change="checkPhone"/>
            {{ form.message_phone }}
        </el-form-item>
        <el-form-item label="Firstname">
            <el-input v-model="form.firstname" />
        </el-form-item>
        <el-form-item label="Lastname">
            <el-input v-model="form.lastname" />
        </el-form-item>
        <el-form-item>
      <el-button type="primary" @click="onSubmit" :disabled="!(username&&email&&phone)">Submit</el-button>
    </el-form-item>
</el-form>
        </div>
    </div>

</div>

</template>

<script>

import { reactive, ref } from "vue"
import axios from "axios"
import { ElMessage } from "element-plus"

export default {
    name: "login",
    setup() {
        const form = reactive({
            username: "",
            password: "",
            phone: "",
            message_username: "",
            message_email: "",
            message_phone: ""
        });
        const onenter = () => {
            console.log("enter");
        }
       let email = ref(false), username = ref(false), phone = ref(false);

       const checkUsername = async () => {
            try {
                const usernameExist = await axios.get("/account/checkusername", {
                params: {
                    username: form.username
                }
                });
                console.log(usernameExist.data);
            if(usernameExist.data.status == 0) {
                // console.log("username is available");
                username.value = true;
                form.message_username = usernameExist.data.msg;
            } else{
                form.message_username = usernameExist.data.msg;
                console.log(form.message_username);
            }
            } catch (error) {
                console.log(error);
                ElMessage.error(error.response.data);
            }
            
        }

        const checkEmail = async() => {
            try{
                const emailExist = await axios.get("/account/checkemail",{
                    params:{
                        email: form.email
                    }
                });
                if (emailExist.data.status == 0) {
                    email.value = true;
                    form.message_email = emailExist.data.msg;
                }else{
                     form.message_email = emailExist.data.msg;
                }
            }catch(error){
                console.log(error);
                ElMessage.error(error.response.data);
            }
        }

        const checkPhone = async() => {
            try{
                const phoneExist = await axios.get("/account/checkphone",{
                    params:{
                        phone: form.phone
                    }
                });
                if (phoneExist.data.status == 0) {
                    phone.value = true;
                    form.message_phone = phoneExist.data.msg;
                }else{
                    form.message_phone = phoneExist.data.msg;
                }
            }catch(error){
                console.log(error);
                ElMessage.error(error.response.data);
            }
        }

        const onSubmit = () => {
            console.log("submit");
            if(email && username && phone){
                return axios.post( "/account/register", form).then(res=>{
                if(res.data.status == 0){
                     ElMessage({
                    message: res.data.msg,
                    type:'success'
                    });
                }else{
                     ElMessage({
                    message: res.data.msg,
                    type:'warning'
                });
                }
                 console.log(res);
            }).catch(e => {
                 console.log(e);
            })
            }
           
        }
        return {
            form,
            onSubmit,
            onenter,
            checkEmail,
            checkPhone,
            checkUsername,
            username,
            email,
            phone
        }
    }
}
</script>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .register-background {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>

